<template>
  <v-row>
    <v-dialog v-model="alert" max-width="220px"><v-card><v-card-title class="text-h5">你已完成了{{ this.message }}</v-card-title></v-card></v-dialog>
    <v-dialog v-model="dialog" persistent max-width="700px">
      <template v-slot:activator="{ on, attrs }">
        <v-btn text color="teal accent-4" v-bind="attrs" v-on="on">
          设置
        </v-btn>
      </template>
      <v-card height="320px">
        <v-card-title class="text-h5">
          胡图图书馆图书借阅证
        </v-card-title>
        <v-card-text>胡图图书馆的图书借阅证状态管理是非常重要的，它可以帮助图书馆有效地管理借阅证，确保所有借阅证的状态都是正确的，从而保障图书馆的正常运营。</v-card-text>
        <v-card-text>
          <div class="text-h7">
            读者：{{ this.name }}<br>
            电话号码：{{ this.user_phonenum }}<br>
            <template v-if="this.licence_id">
              借阅证号：{{ this.licence_id }}<br>
              有效期：{{ this.out_time }}<br>
              状态：{{ this.status }}
            </template>
            <template v-else>
              借阅证：未办理<br>
            </template>
          </div>

        </v-card-text>
        <v-card-actions>
          <div>
            <v-menu offset-y>
              <template v-slot:activator="{ on }">
                <v-btn color="green darken-1" text v-on="on">状态管理</v-btn>
              </template>
              <v-list>
                <v-list-item v-for="(item, index) in menuItems" :key="index" @click="handleItemClick(item)">
                  <v-list-item-title>{{ item.text }}</v-list-item-title>
                </v-list-item>
              </v-list>
            </v-menu>
          </div>
          <v-spacer></v-spacer>
          <v-btn color="green darken-1" text @click="dialog = false">
            取消
          </v-btn>
          <v-btn color="green darken-1" text @click="dialog = false">
            保存
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-row>
</template>

<script>
import axios from "axios";
import qs from "qs";
export default {
  name: "borrow_cardinfo",
  mounted() {
    this.user_phonenum = sessionStorage.getItem("phone");
    axios({
      method: "get",
      url: this.$root.businessServer + "licenceInfo/getAlllicenceInfo?user_phonenum="+this.user_phonenum,
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
    })
      .then((response) => {
        var responseDate=response.data
        this.licence_id=responseDate.data.licence_id
        this.status=responseDate.data.status
        this.out_time=responseDate.data.out_time
        sessionStorage.setItem("timeout",this.out_time)
        sessionStorage.setItem("licenceid",this.licence_id)
      })
      .catch((error) => {});
  },
  data() {
    return {
      dialog: false,
      message: null,
      alert: false,
      name: sessionStorage.getItem("name"),
      licence_id:this.licence_id,
      out_time:this.out_time,
      menuItems: [
        { text: "正常", index: "1-3-1" },
        { text: "暂停", index: "1-3-3" },
        { text: "挂失", index: "1-3-4" },
        { text: "注销", index: "1-3-5" },
      ],
      user_phonenum: null,
    };
  },
  methods: {
    handleItemClick(item) {
      // 处理点击菜单项的逻辑
      this.dialog = false;
      this.message = item.text;
      this.alert = true;
      axios({
        method: "post",
        url: this.$root.businessServer + "licenceInfo/setLicenceStatus",
        data: qs.stringify({
          user_phonenum: this.user_phonenum,
          status: this.message
        }),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      })
        .then((response) => {
          console.log(response.data);
        })
        .catch((error) => {});
    },
  },
};
</script>

<style>
</style>